<script setup>
import { ElMessage } from "element-plus";
import { findTestData,findData } from '@/api/dashboard';
import { ref, onMounted } from 'vue'

//定义数据
const AllPeople = ref()
const UserNumber = ref()
const PageNumber = ref()
const number2 =ref(0)
onMounted(()=>{
   findData().then(({code,msg,data})=>{
    if (code===2000) {
      AllPeople.value = data.count
    }else{
      ElMessage.error(msg)
    }
   })

  findTestData().then(({ code, msg, data }) => {
    if (code === 2000) {
      //获取的数据如何处理
      // console.log(data)
        PageNumber.value = data.length

       for(var i=0;i<data.length;i++){
         number2.value += data[i].count
       }
        console.log(number2.value);

        UserNumber.value = number2.value
   
    } else {
      ElMessage.error("后台数据获取失败");
    }

  })

})

</script>

<template>
  <el-row :gutter="10">

    <div></div>
    <el-col :span="6"> <div  class="grid-content ep-bg-purple" >  <Edit style="width: 1em; height: 1em; margin-right: 8px" />总人次数:{{UserNumber}}</div></el-col>
    <el-col :span="6"> <div class="grid-content ep-bg-purple" > <el-icon><User /></el-icon>平台人数:{{ AllPeople }}</div></el-col>
    <el-col :span="6"> <div class="grid-content ep-bg-purple" ><el-icon><Management /></el-icon> 考试卷总数:{{ PageNumber }}</div></el-col>
    <el-col :span="6"> <div class="grid-content ep-bg-purple" ><el-icon><UserFilled /></el-icon> 考试成绩总览</div></el-col>
  </el-row>
</template>

<style scoped>
.el-row {
  margin-bottom: 0px;
}
.el-row:last-child {  
  margin-bottom: 10px;
}
.el-col {
  border-radius: 10px;
}

.grid-content {
  border-width: 20px;
  border: groove;
  border-color:white;
  border-radius: 30px;
  min-height: 60px;
  width: 300px;
  height:100px;
  /* background-color: aqua; */
  box-shadow: 10px 5px 30px 1px rgba(173, 170, 170, 0.76);
  text-align: center;
  color: black;
  line-height: 90px;
  font-size: 30px;
  
}
</style>